<div class="content">
  <div class="choose">
    <div class="h3">新增CNC機臺</div>
    <div style="flex-direction: row;flex-wrap: wrap;display: flex;">
      <div class="input_first" style="margin-left: 40px;padding-left:32px;">
        名稱：<input type="text" name='' [(ngModel)]="name">
      </div>
      <div class="input_first" style="margin-left: 0px;">
        設備類型：<input type="text" value='' name=''[(ngModel)]="MachineModel">
      </div>
      <div class="input_first" style="margin-left: 0px;">
        設備名稱：<input type="text" name=''[(ngModel)]="MachineName">
      </div>
      <div class="input_first" style="margin-left: 0px;">
        設備序列號：<input type="text" name=''[(ngModel)]="MachineSN">
      </div>
    </div>
    <!-- 分割线 -->
    <div class="wrap"></div>
    <!-- 按钮 -->
    <div style="width: 100%;display: flex;padding:25px 0 ;">
      <div style="margin:0 auto;height: 32px;">
        <!-- 清除按钮 -->
        <button class="clear" (click)="clear()"></button>
        <!-- 保存按钮 -->
        <button class="save" (click)="save()"></button>
      </div>
    </div>
  </div>
  <!-- table -->
  <nz-table #groupingTable [nzShowPagination]=false nzSize="middle" [nzData]="listOfData" [nzWidthConfig]="widthConfig"
    [nzScroll]="scrollConfig" style="height: 440px !important;">
    <thead>
      <tr>
        <th>名稱</th>
        <th>設備類型</th>
        <th>設備名稱</th>
        <th>設備序列號</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="tr_hover" *ngFor="let data of listOfData,let Key = index" (click)="edit(data)">
        <td>{{data.name}}</td>
        <td>{{data.MachineModel}}</td>
        <td>{{data.MachineName}}</td>
        <td>{{data.MachineSN}}</td>
        <td>
          <a class="del" (click)="showModal(data)"></a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <!-- 弹出框 -->
  <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
  [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
  <p style="font-size: 20px;">確定刪除嗎？</p>
  </nz-modal>
</div>
